<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>
<style>
    *{
        margin-top: 20px;
    }
</style>
<body>
    <!-- 
        1.vue中常用的按键别名
                回车 => enter
                删除 => delete （捕获“删除”和“退格”键）
                退出 => esc
                空格 => space
                换行 => tab  (配合keydown 去使用)
                上 => up
                下 => down
                左 => left
                右 => right

        2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但是注意转化为  小写的-连接的名称 caps-lock

        3.系统修饰键：ctrl、alt、shift、meta
            1）：配合keyup使用：按下修饰键的同时、按下其他键，随后释放其他键，事件才被触发。
            2）：配合keydown使用：正常触发事件
        
        4.也可以使用keyCode去指定具体的按键（不推荐）

        5.Vue.config.keyCode.自定义键名 = 键码,可以去定制别名按键
     -->
    <div class="root">
        <h2>欢迎来到我的{{world}}</h2>
        按下
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br>
        换行
        <input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo"><br>
        退出
        <input type="text" placeholder="按下回车提示输入" @keyup.esc="showInfo"><br>
        自定义 切换大小写 按键
        <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo"><br>
        ctrl  alt shift  mete 按下修饰键的同时、按下其他键，随后释放其他键，事件才被触发。
        <input type="text" placeholder="按下回车提示输入" @keydup.ctrl.y="showInfo"><br>
        <hr>
        <input type="text" placeholder="按下回车提示输入" @keydup.huiche="showInfo"><br>
    </div>
</body>
    <script>
        Vue.config.keyCodes.huiche = 22;
        new Vue({
            data(){
                return {
                    world:'世界'
                }
            },
            methods:{
                showInfo(e){
                    console.log(e.target.value)
                    console.log(e.key)
                }
            }
        }).$mount('.root')
    </script>

</html>